<template>
    <a-row :gutter="[16,16]" type="flex">

        <a-col :xs="12" :sm="12" :md="12" :lg="4" :xl="4" :xxl="4" flex="auto">
            <div class="flexCol">
                <a-card title="菜单设置对象">

                    <p>
                        <a-button block :type="btnType(0)"
                                  @click="onChangeTag(0,'默认菜单')"
                        >默认菜单
                        </a-button>
                    </p>
                    <a-divider>个性化菜单</a-divider>
                    <p v-for="(item,index) in wxmpTagOPT " :key="index">
                        <a-button block :type="btnType(item.value)"
                                  @click="onChangeTag(item.value,item.name)"
                        >{{item.name}}
                        </a-button>
                    </p>
                    <a-divider>其他操作</a-divider>
                    <a-button block type="danger" @click="cleanMenu()">删除菜单</a-button>
                </a-card>
            </div>


        </a-col>

        <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8" :xxl="8" flex="auto">
            <!--预览  回调告诉苏组件需要打开的按钮编辑器   -->
            <preview
                    v-if="showPreview"
                    :menuList="menuList"
                    :menuTagId="menuTagId"
                    :menuTagName="menuTagName"
                    @onEdit="(e)=>editId=e.id"
                    @submit="onsubmit"
                    class="flexCol"/>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12" flex="auto">
            <MenuForm v-if="editId" :menuList="menuList" :editId="editId"
                      @onRemove="onRemoveHandler" class="flexCol"/>
        </a-col>

    </a-row>

</template>

<script>
    import {wxmpTagDict} from '../../../../util/internal.api'
    import {getMenuButtons, saveMenuButton, deleteMenu} from '../public/http'

    export default {
        components: {
            preview: () => import('./component/preview'),
            MenuForm: () => import('./component/MenuForm')
        },
        data() {
            return {
                menuList: [],
                editId: null,
                wxmpTagOPT: [],
                menuTagId: 0,
                menuTagName: "默认菜单",
                showPreview: false,
            }
        },

        methods: {
            //删除菜单

            cleanMenu() {
                let _this = this;
                this.$confirm({
                    title: '确定要删除菜单吗？',
                    content: '删除操作将会删除公众号默认菜单以及所有个性化菜单',
                    onOk() {
                        deleteMenu().then(res => {
                            _this.$exMod.ajaxMessage(res);
                            _this.loadMenu();
                        })
                    }


                })


            },
            //保存菜单
            onsubmit() {
                let obj = {tagId: this.menuTagId, buttons: this.menuList}
                saveMenuButton(obj).then(res => {
                    this.$exMod.ajaxMessage(res);
                })

            },
            //根据标签Id调整正在编辑的菜单的样式
            btnType(tagId) {
                return this.menuTagId === tagId ? 'primary' : 'default';
            },

            loadMenu() {
                getMenuButtons(this.menuTagId).then(res => {
                    this.menuList = res.data.result;
                });
            },
            //切换编辑的标签
            onChangeTag(tagId, tagName) {
                this.showPreview = false;
                this.menuTagId = tagId;
                this.menuTagName = tagName;
                this.menuList = [];
                this.editId = null;
                this.loadMenu(); //重新加载
                this.showPreview = true;
            },
            //删除菜单处理程序
            onRemoveHandler(e) {
                const removeId = e.editId;
                let newArr = this.menuList.filter((item) => {
                    return item.id !== removeId && item.pid !== removeId;
                })
                this.editId = null;
                this.menuList = newArr;
            },
            //数据初始化
            async init() {
                await wxmpTagDict().then(res => this.wxmpTagOPT = res);
                await this.loadMenu();
                this.showPreview = true;
            },


        },
        created() {
            this.init();

        }


    }
</script>

<style>
</style>
